<template>
    <div class="wrap">
        <ul>
            <li v-for="(item,i) in alreadyList" :key="i">
                <input type="checkbox" v-model="item.checked" @click="choose(i)">{{item.checked}}{{item.title}}
            </li>
        </ul>
        <input type="checkbox" v-model="checkall" @click="checkFun">全选
        <button @click="del">删除</button>
    </div>
</template>
<script>
export default {
    data(){
        return {
            alreadyList:[],
            checkall:false
        }
    },
    created(){
        let addList = JSON.parse(localStorage.getItem('addList')) || [];
        addList = addList.map(item => {
            item.checked = false
            return item
        })
        this.alreadyList = addList;
    },
    methods:{
        choose(i){
            this.alreadyList[i].checked = !this.alreadyList[i].checked;
            this.checkall = this.alreadyList.every(item =>item.checked);
        },
        checkFun(){
            this.checkall = !this.checkall;
            this.alreadyList = this.alreadyList.map(item => {
                item.checked = this.checkall;
                return item
            })
        },
        del(){
            this.alreadyList = this.alreadyList.filter(item => !item.checked );
            localStorage.setItem('addList',JSON.stringify(this.alreadyList));
        }
    }
}
</script>
